<template>
  <nav class="category-nav" :class="userStore.userInfo.theme">
    <div class="nav-container">
      <div 
        class="category-item"
        :class="{ active: activeCategory === null }"
        @click="selectCategory(null)"
      >
        <span>{{ $t('categories.all') }}</span>
      </div>
      <div 
        v-for="category in categories" 
        :key="category.id"
        class="category-item"
        :class="{ active: activeCategory === category.id }"
        @click="selectCategory(category.id)"
      >
        <span>{{ category.name }}</span>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { useUserStore } from '@/store/user'
import type { Category } from '@/types'

const props = defineProps<{
  categories: Category[]
  selectedCategory: number | null
}>()

const emit = defineEmits<{
  (e: 'select', categoryId: number | null): void
}>()

const userStore = useUserStore()
const activeCategory = ref<number | null>(props.selectedCategory)

const selectCategory = (categoryId: number | null) => {
  activeCategory.value = categoryId
  emit('select', categoryId)
}
</script>

<style scoped lang="scss">
.category-nav {
  position: sticky;
  top: 20px;
  z-index: 10;
  padding: 20px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;

  .nav-container {
    display: flex;
    flex-direction: column;
    gap: 15px;

    @media (min-width: 768px) {
      flex-direction: row;
      overflow-x: auto;
      padding-bottom: 10px;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    .category-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 12px;
      background: transparent;

      &:hover {
        background: rgba(109, 40, 217, 0.1);
      }

      &.active {
        background: rgba(109, 40, 217, 0.2);
        font-weight: bold;
      }
    }
  }
}
</style> 